<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>[[${param.keyword}]]的搜索结果</title>
</head>
<head>
    <meta th:replace="clip/meta::common">
    <meta th:replace="theme/sakura/clip/meta::article(@{|${param.keyword}的搜索结果|},'','')">
    <link th:replace="theme/sakura/clip/css-index::article"/>
</head>

<body class="hfeed chinese-font serif">
<div id="app">
    <section id="main-container">
        <div th:replace="theme/sakura/clip/head::article(@{|${param.keyword}的搜索结果|},
    ${session.user.avatar},${session.user.username})"></div>
        <div id="page" class="site wrapper">
            <!--背景-->
            <div th:replace="theme/sakura/clip/head::article-bg(@{|${param.keyword}的搜索结果|},'http://acg.toubiec.cn/random.php',
        '','','userUrl','')"></div>

            <div id="content" class="site-content">
                <div id="primary" class="content-area">
                    <main id="main" class="site-main" role="main">
                        <h1 class="main-title" style="font-family: 'Ubuntu', sans-serif;">
                            <i class="fa fa-envira" aria-hidden="true"></i>
                            <span class="i18n" data-iname="home.discovery"> </span>
                        </h1>
                        <!-- ................. -->
                        <post-card v-for="p in postList" :post="p"></post-card>
                        <!-- ................. -->
                    </main>
                </div><!-- #primary -->
            </div><!-- #content -->
        </div><!-- #page Pjax container-->

    </section><!-- #section -->
    <!-- m-nav-center -->
    <a href="#" class="cd-top"></a>
    <!-- m-cd-top start -->
    <button class="m-cd-top" title="Go to top">
        <i class="fa fa-chevron-up" aria-hidden="true"></i>
    </button>
    <!-- m-cd-top end -->
    <!-- search start -->
    <form class="js-search search-form search-form--modal" method="get" action="/search" role="search">
        <img th:src="@{/theme/img/search.gif}">
        <div class="search-form__inner">
            <div>
                <p class="micro mb-">输入后按回车搜索 ...</p>
                <i class="iconfont icon-search"></i>
                <input class="text-input" type="search" name="keyword" placeholder="Search" required>
            </div>
        </div>
        <div class="search_close"></div>
    </form>
    <!-- search end -->
</div>
<div th:replace="theme/sakura/clip/widget::theme-change"></div>
<script th:replace="theme/sakura/clip/config::article"></script>
<script th:replace="theme/sakura/clip/js-index::article"></script>
<script th:replace="clip/script::common"></script>

<template id="r">
    <article class="post post-list-thumb post-list-thumb-left" itemscope="" itemtype="http://schema.org/BlogPosting">
        <div class="post-thumb">
            <a :href="post.url">
                <img :src="post.thumbnail" class="lazyload"/>
            </a>
        </div><!-- thumbnail-->
        <div class="post-content-wrap">
            <div class="post-content">
                <div class="post-date">
                    <i class="iconfont icon-time"></i><span class="i18n" data-iname="postlist.time"
                                                            data-ivalue="2021-09-09"></span>
                </div>
                <a :href="post.url" class="post-title"><h3>{{post.title}}</h3></a>
                <div class="post-meta">
                    <span>
                        <i class="iconfont icon-attention"></i>
                        <span class="i18n" data-iname="postlist.heat" data-ivalue="29">
                            {{post.visits}}
                        </span>
                    </span>
                    <span class="comments-number">
					    <i class="iconfont icon-mark"></i>
					    <span class="i18n" data-iname="postlist.comments" data-ivalue="0">
                            {{post.commentsNumber}}
					    </span>
				    </span>
                    <span>
                        <i class="iconfont icon-file"></i>
                        <a href="/categories">默认分类</a>
                    </span>
                </div>
                <div class="float-content">
                    <p>{{post.summary}}</p>
                    <div class="post-bottom">
                        <a :href="post.url" class="button-normal"><i class="iconfont icon-caidan"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </article>
</template>
<script>
    var ajax = {
        data() {
            return {
                postList: []
            }
        },
        mounted() {
            json_api("[[${url}]]", d => {
                if (d.code == 200)
                    this.postList = d.result
            });
        }
    }
    var app = Vue.createApp(ajax)
    app.component('post-card', {
        props: ['post'],
        template: '#r'
    })
    app.mount('#app')
</script>
</body>
</html>